<template>
  <div class="QuickCheck-container">
    <div class="flex-row-xbetween-ycenter header">
      <div>
        <a-select
          style="width: 100px"
          v-model:value="groupData.operation"
          placeholder="请选择"
        >
          <a-select-option value="and">并且</a-select-option>
          <a-select-option value="or">或者</a-select-option>
        </a-select>
      </div>
      <div class="flex-row-ycenter">
        <div class="c-primaryColor pointer" @click.stop="addGroup">
          添加分组
        </div>
        <div
          v-if="code !== 999"
          class="pointer ml-10"
          style="color: red"
          @click.stop="deleteGroup"
        >
          删除分组
        </div>
      </div>
    </div>
    <div
      v-for="(subItem, subIndex) in groupData.filters"
      :key="subIndex"
      style="background-color: #ffffff; padding: 10px; border-radius: 4px"
    >
      <div class="flex-row-ycenter">
        <div>
          <a-select
            @change="keyChange(subItem)"
            style="width: 200px"
            v-model:value="subItem.key"
            placeholder="请选择"
          >
            <a-select-option value="{loginRole}"
              >{当前登录用户的角色}</a-select-option
            >
            <a-select-option value="{loginUser}"
              >{当前登录的用户}</a-select-option
            >
            <a-select-option value="{loginOrgId}"
              >{当前登录用户的部门}</a-select-option
            >
          </a-select>
        </div>
        <div class="ml-10">
          <a-select
            style="width: 100px"
            v-model:value="subItem.contrast"
            placeholder="请选择"
          >
            <a-select-option value="eq">等于</a-select-option>
            <a-select-option value="neq">不等于</a-select-option>
            <a-select-option value="lt">小于</a-select-option>
            <a-select-option value="gt">大于</a-select-option>
            <a-select-option value="lte">小于等于</a-select-option>
            <a-select-option value="gte">大于等于</a-select-option>
            <a-select-option value="in">属于</a-select-option>
            <a-select-option value="not in">不属于</a-select-option>
            <a-select-option value="contains">包含</a-select-option>
          </a-select>
        </div>
        <div class="ml-10" style="width: 200px">
          <QuickRes
            ref="QuickResRef"
            v-model:text="subItem.text"
            v-model:ids-text="subItem.value"
            :type="quickResType(subItem)"
          ></QuickRes>
        </div>
        <div class="flex-row-ycenter ml-10">
          <div class="c-primaryColor pointer" @click.stop="addSub(subIndex)">
            添加
          </div>
          <div
            v-if="groupData.filters.length > 1"
            class="ml-10 pointer"
            style="color: red"
            @click.stop="deleteSub(subIndex)"
          >
            删除
          </div>
        </div>
      </div>
    </div>

    <template v-if="groupData.children && groupData.children.length">
      <QuickCheck
        :parentData="groupData"
        :group-data="item"
        v-for="(item, index) in groupData.children"
        :key="index"
        :code="Number(index)"
      ></QuickCheck>
    </template>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref} from "vue";
import QuickRes from "@/components/quick/QuickRes.vue";
import {deepClone} from "@/utils/common";

const props = defineProps({
  groupData: {
    type: Object,
    default: {
      operation: "and",
      filters: [
        {
          key: "",
          value: "",
          contrast: "",
          text: ""
        }
      ],
      children: []
    }
  },
  parentData: {
    type: Object,
    default: {}
  },
  code: {
    type: Number,
    default: 999
  }
});

const quickResType = computed(() => (item) => {
  if (item.key == "{loginRole}") {
    return [3];
  } else if (item.key == "{loginUser}") {
    return [2];
  } else {
    return [1];
  }
});
const QuickResRef = ref();
const keyChange = (item) => {
  item.value = "";
  item.text = "";
  QuickResRef.value[0].clearSelect();
};

const item = {
  operation: "and",
  filters: [
    {
      key: "",
      value: "",
      contrast: "",
      text: ""
    }
  ],
  children: []
};
const subItem = {
  key: "",
  value: "",
  contrast: "",
  text: ""
};

const addGroup = () => {
  if (props.groupData.children) {
    props.groupData.children.push(deepClone(item));
  }
};

const deleteGroup = () => {
  props.parentData.children.splice(props.code, 1);
};

const addSub = (index) => {
  props.groupData.filters.splice(index + 1, 0, deepClone(subItem));
};
const deleteSub = (index) => {
  props.groupData.filters.splice(index, 1);
};
</script>

<style lang="less" scoped>
.QuickCheck-container {
  border: 1px solid #eeeeee;
  border-radius: 4px;
  padding: 52px 10px 10px;
  position: relative;
  margin-bottom: 10px;

  .header {
    background-color: #eeeeee;
    padding: 10px;
    border-radius: 4px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }
}
</style>
